﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>ReignOfGunpowder</title>

    <!-- Références WinJS -->
    <!--    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>-->

    <!-- Références ReingOfGamepowder -->
    <!--    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>-->
    <!-- Librairie EASEL.JS -->
    <!--<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />-->
    <script type="text/javascript" src="src/Utils/Prototype.js"></script>
    <script type="text/javascript" src="src/Utils/Singleton.js"></script>
    <script type="text/javascript" src="easeljs/utils/UID.js"></script>
    <script type="text/javascript" src="easeljs/geom/Matrix2D.js"></script>
    <script type="text/javascript" src="easeljs/display/DisplayObject.js"></script>
    <script type="text/javascript" src="easeljs/display/Container.js"></script>
    <script type="text/javascript" src="easeljs/display/Shadow.js"></script>
    <script type="text/javascript" src="easeljs/display/SpriteSheet.js"></script>
    <script type="text/javascript" src="easeljs/display/Stage.js"></script>
    <script type="text/javascript" src="easeljs/events/MouseEvent.js"></script>
    <script type="text/javascript" src="easeljs/display/Shape.js"></script>
    <script type="text/javascript" src="easeljs/display/Graphics.js"></script>
    <script type="text/javascript" src="easeljs/utils/Ticker.js"></script>
    <script type="text/javascript" src="easeljs/display/Bitmap.js"></script>
    <script type="text/javascript" src="easeljs/display/Text.js"></script>
    <script type="text/javascript" src="easeljs/geom/Rectangle.js"></script>
    <script type="text/javascript" src="easeljs/geom/Point.js"></script>
    <script type="text/javascript" src="easeljs/utils/SpriteSheetUtils.js"></script>
    <script type="text/javascript" src="easeljs/display/BitmapAnimation.js"></script>

    <!-- Nos Librairies -->
    <!-- Utils -->
	<script src="src/Utils/XNARectangle.js"></script>
    <!-- BO -->
    <script src="src/BO/Bombe.js"></script>
    <script src="src/BO/Perso.js"></script>
	<script src="src/BO/Flamme.js"></script>
	<script src="src/BO/Decor.js"></script>
	<script src="src/BO/Bonus.js"></script>
	<script src="src/BO/Map.js"></script>
    <!-- BLL -->
    <script src="src/BLL/LesBombes.js"></script>
    <script src="src/BLL/LesPersos.js"></script>
    <script src="src/BLL/LesFlammes.js"></script>
    <script src="src/BLL/LesDecors.js"></script>
    <script src="src/BLL/LesBonus.js"></script>



    <!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

    <script type="text/javascript">
        var canvas;
        var stage;
        var fpsLabel;
        var imgMap;
        var deplacement = 0;
		
		//Les constantes
		

        //Les différents tableaux
		var tabLesBombes = LesBombes.GetInstance()
		var tabLesPersos = LesPersos.GetInstance();
		var tabLesFlammes = LesFlammes.GetInstance();
		var tabLesDecors = LesDecors.GetInstance();
		var tabLesBonus = LesBonus.GetInstance();

		//Images
        var prsHero = null;
        var bmbBombe = null;
		var decArbre = null;
		var bnsPanneau = null;

		//Touches
        var KEYCODE_SPACE = 32;		//Touche espace
        var KEYCODE_DOWN = 40;		//Touche bas
        var KEYCODE_UP = 38;		//Touche haut
        var KEYCODE_LEFT = 37;		//Touche gauche
        var KEYCODE_RIGHT = 39;		//Touche droit
        
        //LECTEUR JSON
        var xhr = new XMLHttpRequest();

        //register key functions
        document.onkeydown = handleKeyDown;
        document.onkeyup = handleKeyUp;

        function init() {
            canvas = document.getElementById('myCanvas');
            width = canvas.width;
            height = canvas.height;
            stage = new createjs.Stage(canvas);

            imgMap = new createjs.Bitmap("images/background.jpg");

            fpsLabel = new createjs.Text("-- fps", "bold 14px Arial", "#000");
            fpsLabel.x = 10;
            fpsLabel.y = 10;

            //Chargement des images
            imgPerso = "images/perso.png";
            imgBombe = "images/bomb.png";
			imgBombeRouge = "images/bomb2.png";
			imgExplosion = "images/explosion.png";
			imgTronc = "images/stump.png"; 
			imgArbre = "images/tree.png";
			imgPanneau = "images/panneau.png";
			imgRock = "images/rock.png";
			imgLake = "images/lake.png";
			imgStone = "images/ground-stone.png";
			imgCubeRock = "images/cube_rock.png";
			sprCaisse = "images/supplying-box_sprite.png";
			sprAttack = "images/Sprite-attack.png";
			sprEtincelle = "images/Sprite-etincelle.png";
			sprShield = "images/Sprite-shield.png";
			sprHealth = "images/Sprite-health.png";
			sprSprint = "images/Sprite-sprint.png"; 
			sprExplosion1 = "images/Sprite_explosion.png";
			sprExplosion2 = "images/Sprite_explosion2.png";
			sprExplosion3 = "images/Sprite_explosion3.png";
			sprBombe = "images/Sprite_bombe.png";

            // On lance la séquence d’animation
            stage.addChild(fpsLabel);			
            stage.update();

            createjs.Ticker.setInterval(17);
            createjs.Ticker.addListener(window);
            createjs.Ticker.useRAF = true;
            createjs.Ticker.setFPS(60);
            
            new Map(imgMap, "fichier.json");
		
			prsHero = new Perso(imgPerso, new createjs.Point( 400, 200), new createjs.Point( 32, 48));
			//decArbre = new Decor(imgArbre, new createjs.Point(200,200), new createjs.Point(100,150), new XNARectangle(210,270,25,25), true, false);
			//decCaisse = new Decor(sprCaisse, new createjs.Point(600,50), new createjs.Point(250,250), new XNARectangle(210,270,25,25), true, false);
			//decCaisse = new Decor(sprCaisse, new createjs.Point(150,300), new createjs.Point(250,250), new XNARectangle(210,270,25,25), true, false);
        }

        function tick() {
            fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
            tabLesBonus.tick();
			tabLesPersos.tick();
            tabLesBombes.tick();
			tabLesFlammes.tick();
			tabLesDecors.tick();
            stage.update();
        }

		//Evènement sur les touches du clavier
        function handleKeyDown(e) {

            //cross browser issues exist
            if (!e) { var e = window.event; }
            //Annule l'évènement en cours
            e.preventDefault();
            switch (e.keyCode) {
                case KEYCODE_LEFT:
                	if (prsHero.intDirection != 4 || prsHero.bolEnDeplacement == false){ deplacement ++;} 
                	prsHero.Deplacer(4); break;
                case KEYCODE_RIGHT:
                	if (prsHero.intDirection != 2 || prsHero.bolEnDeplacement == false){ deplacement ++;} 
                	prsHero.Deplacer(2); break;
                case KEYCODE_UP: 
                	if (prsHero.intDirection != 1 || prsHero.bolEnDeplacement == false){ deplacement ++;} 
                	prsHero.Deplacer(1); break;
                case KEYCODE_DOWN: 
                	if (prsHero.intDirection != 3 || prsHero.bolEnDeplacement == false){ deplacement ++;} 
                	prsHero.Deplacer(3); break;
                case KEYCODE_SPACE: prsHero.PoserBombe(); break;
            }
        }

        function handleKeyUp(e) {
        	if (!e) { var e= window.event; }
        	
        	e.preventDefault();
        	switch (e.keyCode){
        		case KEYCODE_DOWN: 
        		case KEYCODE_LEFT: 
        		case KEYCODE_RIGHT: 
        		case KEYCODE_UP:
        			deplacement --; break;
        	}
			// Si plus aucune touche de déplacement est appuyée, alors on arrête de se déplacer
        	if (deplacement == 0){prsHero.bolEnDeplacement = false;}
        }


	</script>
</head>

<body onload="init()">

    <!--    <header id="header" class="EaselJS">
        <h1><span class="text-product">Reign of GunPowder</span></h1>
        <p>Test du jeu</p>
    </header>-->

    <canvas id="myCanvas" width="1000" height="600">ROG</canvas>

</body>
</html>
